<script setup lang="ts">
const props = defineProps({
  id: {
    type: [Number, String],
    required: true
  },
  /**
   *     NEWS(0,"咨询"),
   *     ARTICLE(1,"文章"),
   *     QUESTION(2,"问题"),
   *     TALK(3,"说说"),
   *     DOWNLOAD(4,"下载");
   */
  type: {
    type: Number,
    required: true
  }
})

const commentFormFocused = ref(false)

const onCommentFormFocused = (e) => {
  e.stopPropagation()
  commentFormFocused.value = true
}
if (process.client) {
  document.body.addEventListener('click', () => {
    commentFormFocused.value = false
  })
}

const inputContent = ref('')
</script>

<template>
  <div id="comment-box" class="container comment-list-box">
    <!-- 评论输入区 Start -->
    <div :class="['comment-form', {focused: commentFormFocused}]">
      <div class="header">
        <span class="header-title">评论</span>
      </div>
      <div class="content">
        <div class="avatar-box">
          <div class="avatar tidy-avatar avatar">
<!--            <img src="https://p9-passport.byteacctimg.com/img/mosaic-legacy/3791/5035712059~300x300.awebp?" alt="avatar" class="lazy avatar-img" loading="lazy">-->
            <img src="~/assets/imgs/58aaf1326ac763d8a1054056f3b7f2ef.svg" alt="avatar" class="lazy avatar-img" loading="lazy">
          </div>
        </div>
        <div class="form-box">
          <div class="auth-card">
            <div class="input-box" @click="onCommentFormFocused($event)">
              <div contenteditable="true" spellcheck="false" placeholder="输入评论（Enter换行，⌘ + Enter发送）" disabled="disabled" class="rich-input empty"></div>
<!--              <div class="login-guide">-->
<!--                <div class="login-guide-text">看完啦，</div>-->
<!--                <div class="login-guide-button">登录</div>-->
<!--                <div class="login-guide-text">分享一下感受吧～</div>-->
<!--              </div>-->
            </div>
          </div>
          <div class="action-box" v-show="commentFormFocused">
            <Emoji/>
            <div class="image-btn">
              <i-ep-picture class="icon"/>
              <span>图片</span>
            </div>
            <div class="submit">
              <span data-v-46adacd5="">⌘ + Enter</span>
              <button :disabled="!inputContent.length" class="submit-btn">发表评论</button>
            </div>
          </div>
        </div>
        <input type="file" class="hidden">
      </div>
    </div>
    <!-- 评论输入区 End -->

    <!-- 热门评论区 Start -->
    <div class="container hot-list">
      <div class="title">
        热门评论
        <i-ant-design-fire-filled style="color:#f53f3f"/>
      </div>
      <div class="list">
        <CommentBoxItem/>
      </div>
    </div>
    <!-- 热门评论区 End -->

  </div>
</template>

<style scoped lang="scss">
  #comment-box{
    margin-top: 20px;
    &.comment-list-box {
      max-width: 1140px;
      padding-bottom: 24px;
      border-radius: 4px;
      background-color: var(--tidy-layer-1);
      padding-left: 32px;
      padding-right: 32px;
      box-sizing: border-box;
      .comment-form {
        display: flex;
        position: relative;
        flex-direction: column;
        padding-top: 24px;
        border-radius: 2px;
        .header {
          margin-bottom: 24px;
          .header-title {
            font-size: 18px;
            line-height: 30px;
            font-weight: 600;
            color: var(--tidy-font-1);
          }
        }
        .content {
          display: flex;
          align-items: flex-start;
          .avatar-box {
            flex: 0 0 auto;
            .avatar {
              margin-right: 16px;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              .lazy {
                position: relative;
                -o-object-fit: cover;
                object-fit: cover;
              }
            }
          }
          .form-box {
            flex: 1 1 auto;
            position: relative;
            .auth-card {
              position: relative;
            }
            .input-box {
              position: relative;
              font-size: 0;
              transition: all .3s;
              background: var(--tidy-background);
              border: 1px solid transparent;
              border-radius: 4px;
            }
            .rich-input {
              position: relative;
              padding: 8px 12px;
              color: var(--tidy-font-1);
              outline: none;
              min-height: 64px;
              box-sizing: border-box;
              line-height: 22px;
              font-size: 14px;
              resize: both;
              &:empty:before {
                color: var(--tidy-font-3);
              }
              &:before {
                content: attr(placeholder);
                position: absolute;
                pointer-events: none;
                user-select: none;
                color: #8a919f;
              }
            }
            .action-box {
              display: flex;
              align-items: center;
              margin-top: 8px;
              .image-btn {
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
                margin-left: 24px;
                .icon {
                  fill: var(--tidy-font-2);
                  background-repeat: no-repeat;
                  background-size: cover;
                  margin-right: 4px;
                  transition: fill .3s;
                }
                span {
                  color: var(--tidy-font-2);
                  font-size: 14px;
                  line-height: 22px;
                  transition: color .3s;
                }
              }
              .submit {
                flex: 0 0 auto;
                margin-left: auto;
                span {
                  font-size: 14px;
                  line-height: 22px;
                  letter-spacing: 0.2px;
                  color: var(--tidy-font-3);
                  margin-right: 16px;
                }
                .submit-btn {
                  flex: 0 0 auto;
                  margin-left: auto;
                  width: 92px;
                  text-align: center;
                  font-size: 14px;
                  line-height: 36px;
                  background: var(--tidy-brand-1-normal);
                  border-radius: 4px;
                  color: #fff;
                  padding: 0;
                  cursor: pointer;
                  &:disabled {
                    background: var(--tidy-brand-4-disable);
                  }
                }
              }
            }
          }
        }
        &.focused {
          .input-box {
            border-color: var(--tidy-brand-1-normal)!important;
            background: var(--tidy-layer-1)!important;
          }
        }
      }

      /*热门评论区 Start*/
      .hot-list {
        margin-top: 0;
        padding-top: 32px;
        @include clearfix;
        .title {
          position: relative;
          padding-bottom: 8px;
          font-weight: 600;
          font-size: 18px;
          color: var(--tidy-font-1);
          width: 100%;
          display: flex;
          align-items: center;
          line-height: 30px;
        }
      }
      /*热门评论区 End*/
    }
  }
</style>
